<template>
	
	<div >
		<flexbox>
	      <flexbox-item>
	      		<span v-for="m in months.montharray" 
	      		style="padding:5px 10px; margin:10px 5px; border-radius: 15px;"
	      		v-on:click="choosemonth(months.monthobj[m])" class="h4" 
	      		v-bind:class="{ choosemonth : month == months.monthobj[m].m}"
	      		> {{m}} </span>
	      </flexbox-item>
	    </flexbox>

	    <flexbox class="mt15">
		    <flexbox-item v-for="(w, index) in weekarr" class="text-center week"
		    v-bind:class="{ red: index == 0 || index == weekarr.length - 1 }" 
		    >
		      	{{w}}
		    </flexbox-item>
	    </flexbox>

	    <flexbox v-for="d1 in calendardata" :gutter="0">
	    	<flexbox-item v-for="(d2, index) in d1" class="text-center day"
	    	v-bind:class="{
	    		'chooseday' : d2.data == undefined ? false : daydata.id == d2.data.id

	    		//'chooseday' : d2.data && daydata.id == d2.data.id
	    	}" 
	    	@click.native="chooseday(d2)"
	    	>
	    		<!-- {{daydata.id}}<br>{{d2.data || d2.data.id}} -->
	    		<!-- {{d2 || d2.data || d2.data.id}} -->
	      		<div class="mb3">{{d2.label}}</div>
	      		<div v-for="d3 in d2.labelarr">{{d3.show}}</div>
	      	</flexbox-item>
	    </flexbox>
		
	</div>


</template>

<script>

import { date2str, str2date, dateDiff } from '../../util/util'
	
export default {

	name : 'pricecalendar',

	data () {
		return {
			'info' : this.config,

			'weekarr' : ["日", "一", "二", "三", "四", "五", "六"],

			'year' : '',

			'month' : '',


			'daydata' : {
				'id' : '',
			},
		}

	},

	props: {
	    config: {
	      	type: Object,
	      	default: {
	      		'year' : 2018,
	      		'month' : 3,
	      		'daypricelist' : [],
	      		'showattrarr' : [],
	      	}
	    },
	    
	},


	computed : {
		months () {
			var montharray = [];
			var monthobj = {};
			var calendardata = {};
			console.log(this.info);


			for(var i = 0; i < this.info.daypricelist.length; i++){
				var tmp = this.info.daypricelist[i];
				var ma = tmp.date.split('-');
				var key = ma[0] + ma[1];
				if(monthobj[key] == undefined){
					monthobj[key] = {
						'y' : ma[0],
						'm' : ma[1],
					};
					montharray.push(key);
				}

				calendardata[tmp.date] = tmp;
			}

			if(montharray.length > 0){
				this.year = monthobj[montharray[0]].y;
				this.month = monthobj[montharray[0]].m;
			}else{
				this.year = '';
				this.month = '';
			}

			return {
				montharray, 
				monthobj,
				calendardata,
			};
		},

		calendardata () {

			console.log('初始化价格日历');
			console.log(this.info);
			var montharray = [31,28,31,30,31,30,31,31,30,31,30,31];

			var arr = [];

			if(this.year == '' || this.month == ''){
				console.log('未选择');
				return arr;
			}
		
			var obj = {
				'y' : this.year,
				'm' : parseInt(this.month) - 1,
				'data' : [],
			};

			if((obj.m === 1) && (obj.y % 4 === 0) 
			&&((obj.y % 100 !== 0) || (obj.y % 400 === 0)))
	        {
	            montharray[1] = 29;
	        }

	        var now = new Date();
	        var now_str = date2str(now).replace(/-/g,'/');

	        //1号
	        var firstdate = new Date(obj.y, obj.m ,1);
	        //最后一号
	        var lastdate = new Date(obj.y, obj.m, montharray[obj.m]);

	        //1号星期几
	        var fxingqi = firstdate.getDay();
	        //最后一号星期几
	        var lxingqi = lastdate.getDay();

	        var dataarr = [];
	        //日期之前的空位
	        for(var f = 0; f < fxingqi; f++)
	        {
	            var dayobj = {
	                'label' : '',
	                'd' : '0',
	            };
	            dataarr.push(dayobj);
	        }
	        //日期
	        for(var j = 0; j < montharray[obj.m]; j++)
	        {
	            var dayobj = {
	                'label' : j + 1,
	                'd' : obj.y + '-',
	                'labelarr' : [],	//具体显示的信息
	            };

	            if(obj.m < 9){
	            	dayobj.d += '0' + (obj.m + 1);
	            }else{
	            	dayobj.d += obj.m + 1;
	            }

	            dayobj.d += '-';

	            if(j < 9){
	            	dayobj.d += '0' + (j+1);
	            }else{
	            	dayobj.d += (j+1);
	            }

	            //有数据要显示。
	            var show = this.months.calendardata[dayobj.d];
	            if(show != undefined 
	            && Date.parse(dayobj.d.replace(/-/g,'/')) >= Date.parse(now_str)){	
	            	// console.log(dayobj.d.replace(/-/g,'/'));
	            	// console.log(Date.parse(dayobj.d.replace(/-/g,'/')));
	            	for(var x = 0; x < this.info.showattrarr.length; x++){
	            		var xx = this.info.showattrarr[x];

	            		var ooo = {
		            		'show' : (xx.before || '') + show[xx.key] + (xx.after || ''),
		            	};
	            		dayobj.labelarr.push(ooo);
	            		dayobj['data'] = show;
	            	}
	            }
	            dataarr.push(dayobj);
	        }

	        console.log(dataarr);

	        //日期之后的空位
	        for(var l = lxingqi; l < 6; l++)
	        {
	            var dayobj = {
	                'label' : '',
	                'd' : '0',
	            };
	            dataarr.push(dayobj);
	        }

	        

	        for(var i = 0; i < dataarr.length; i++){
	        	//每七个重新组装一个数组。
	        	var x = i % 7;
	        	if(x === 0){
	        		arr.push(new Array());
	        	}
	        	arr[arr.length - 1].push(dataarr[i]);
	        }

	        return arr;

		},
	},

	methods : {
		
		choosemonth (m) {
			console.log(m);

			this.year = m.y;
			this.month = m.m;
		},


		chooseday (item) {
			console.log(item);

			if(item.data == undefined){
				return;
			}

			if(item.data.current_stock_num == 0){
				return;
			}

			const dday = dateDiff(date2str(new Date()), item.d);

			//不能选之前日期的。
			if(dday < 0){
				return;
			}

			this.daydata = item.data;

			this.$emit('chooseday', item);

		}

	},

	created () {

		//this.init();


	}

}


</script>

<style scoped>

.week {
	height: 20px;

	/*padding-bottom: 10px;*/
}
.day {
	height: 55px;
	padding-top: 3px;
	/*padding-bottom: 5px;*/
}

.choosemonth {
	background-color: #999;
	color: #fff;
}

.chooseday {
	background-color: #079fde;
	color: #fff;
}

</style>